<style>
    *{
        touch-action: none;
    }
    .actives{
        background-color: #eeddee;
    }
</style>
<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        {:build_toolbar('refresh')}
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover" width="100%">

                    </table>

                </div>
            </div>

        </div>
    </div>
</div>

<script id="customformtpl" type="text/html">
    <!--form表单必须添加form-commsearch这个类-->
    <form action="" class="form-commonsearch">
        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">商品名称</label>
                        <!--隐式的operate操作符，必须携带一个class为operate隐藏的文本框,且它的data-name="字段",值为操作符-->
                        <input class="operate" type="hidden" data-name="title" value="like"/>
                        <div>
                            <input  id="c-title" class="form-control" type="text" name="title" value=""/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">商品编号</label>
                        <input type="hidden" class="operate" data-name="number" value="like"/>
                        <div>
                            <input id="c-number"  class="form-control " name="number" type="text"
                                   value="" style="display:block;">
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">商品规格</label>
                        <input type="hidden" class="operate" data-name="specs" value="like"/>
                        <div>
                            <input id="c-specs"  class="form-control " name="specs" type="text"
                                   value="" style="display:block;">
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">商品品牌</label>
                        <input type="hidden" class="operate" data-name="brands_id" value="="/>
                        <div>

                            <input id="c-cate_id" data-source="supplier/brands/index" data-field="name"
                                   class="form-control selectpage" name="brands_id" type="text"
                                   value="" style="display:block;">
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">是否物料</label>
                        <input type="hidden" class="operate" data-name="is_material" value="="/>
                        <div>
                            <select id="c-is_material" data-rule="required" class="form-control " name="is_material" disabled>
                                <option value="1">是</option>
                            </select>
                        </div>
                    </div>
                </div>


                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label"></label>
                        <input type="hidden" class="operate" data-name="storehouse_id" value="="/>
                        <div class="row">
                            <div class="col-xs-6">
                                <input type="submit" class="btn btn-success btn-block" value="搜索"/>
                            </div>
<!--                            <div class="col-xs-6">-->
<!--                                <input type="reset" class="btn btn-primary btn-block" value="重置"/>-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="__CDN__/assets/extends/dist/jquery.mousewheel.min.js"></script>

<script>
    // $(window).on('mousewheel', function(event, delta) {
    //     var direction = delta > 0 ? 'Up' : 'Down';
    //     console.log(direction)
        // var step = $(window).height();            //可视区高度
        // var cur_top = $(window).scrollTop();    //当前滚过的高度
        // var direction = delta > 0 ? -1 : 1;
        // var height = direction * step + cur_top;
        // var x_height = Math.floor(height/step)*step;    //滚过整数倍的可视区大小
        //
        // $("html, body").stop().animate({ scrollTop: x_height }, 400);

        // return false;
    // });
    $(window).mousewheel(function(event){
        // $('tbody').find('tr').eq(0).find('td').attr('class','actives')
        // console.log(event.deltaX, event.deltaY, event.deltaFactor);
        // console.log(event.deltaX, event.deltaY, event.deltaFactor);

        var dir = event.deltaY > 0 ? 'Up' : 'Down';
        // console.log(dir)
        if (dir == 'Up') {
            var st = $(this).scrollTop();
            // console.log(st)
            if(st == 0){
                if($('tbody').find('.actives').length == 0){
                    $('tbody').find('tr').eq(0).find('td').attr('class','actives')
                }else{
                    if($('.actives').parents('tr').prev().length >0){
                        that = $('.actives')
                        that.attr('class','')
                        that.parents('tr').prev().find('td').attr('class','actives')
                        // console.log('向下滚动');
                    }else{
                        $('.pagination').find('.active').prev().click()
                    }
                }

                // if($('.pagination').find('.active').parents('div').css('display') == 'none'){
                //
                // }else{
                //      // $('.pagination').find('.active').prev().click()
                // }
            }
        } else {
            if($('tbody').find('.actives').length == 0){
                $('tbody').find('tr').eq(0).find('td').attr('class','actives')
            }else{
                if($('.actives').parents('tr').next().length >0){
                    that = $('.actives')
                    that.attr('class','')
                    that.parents('tr').next().find('td').attr('class','actives')
                    // console.log('向下滚动');
                }else{
                    $('.pagination').find('.active').next().click()
                }
            }

            // if($('tbody').find(''))
            // console.log('向下滚动');
        }
        // return false;

    });
</script>
<div id="cube"></div>